<template>
  <view class="main">
    <view class="alert">
      <up-transition :show="show" mode="fade-down">
        <up-alert title="请点击右上角，在浏览器打开页面下载" type="warning" :description="description"></up-alert>
      </up-transition>
    </view>
    <view class="main-nav">
      <image src="@/static/logo.png" mode=""></image>
      <view class="nav-text">天天鉴</view>
      <view class="nav-title">海量藏品 行家鉴定</view>
      <view class="nav-title">专业文玩鉴定平台</view>
      <view class="nav-btn" @click="download">点击下载</view>
    </view>

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  import {
    version
  } from './api.js'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const isWx = ref(false)
  const show = ref(false)
  const androidUrl = ref('')

  onLoad(() => {
    //判断是否是微信浏览器打开
    // #ifdef H5
    isWx.value = /micromessenger/.test(navigator.userAgent.toLowerCase()) ? true : false
    // #endif
    versionApi()
  })

  const versionApi = (async () => {
    const res = await version()
    if (res && res.code === 1) {
      androidUrl.value = res.data.androidUrl
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none'
      })
    }
  })

  function download() {
    if (isWx.value) {
      //提示跳转浏览器下载
      show.value = true
    } else {
      //判断当前机型
      if (uni.getSystemInfoSync().platform === 'ios') {
        let appleId = 'com.redplanet.lottery'
        plus.runtime.launchApplication({
            action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
          },
          function(e) {
            console.log('Open system default browser failed: ' + e.message);
          }
        );
      } else if (uni.getSystemInfoSync().platform === 'android') {
        const filelist = uni.downloadFile({
          url: androidUrl.value,
          success(res) {
            console.log(111, res);
            if (res.statusCode === 200) {
              plus.runtime.install(res.tempFilePath, {
                force: true
              }, () => {
                plus.runtime.restart();
              })
            } else {
              uni.showModal({
                content: '下载失败,请重试',
              })
            }
          }
        })
        filelist.onProgressUpdate((res) => {
          this.percentage = res.progress
        });
        window.open(androidUrl.value)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    padding-top: var(--status-bar-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background-image: url('@/static/my/image/inviteBackground.png');
    background-size: 100% 100%;
    background-position: center;

    .alert {
      height: 80rpx;
    }

    .main-nav {
      width: 670rpx;
      background: #fff;
      border-radius: 20rpx;
      margin-top: 50rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      padding: 70rpx;
      image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 10rpx;
      }

      .nav-text {
        font-size: 40rpx;
        color: #313131;
        margin: 30rpx 0;
      }

      .nav-title {
        font-weight: 500;
        font-size: 32rpx;
        color: #313131;
      }

      .nav-btn {
        width: 610rpx;
        height: 82rpx;
        background: #A4682F;
        border-radius: 44rpx;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 82rpx;
        text-align: center;
        margin-top: 50rpx;
      }
    }

    .main-text {
      width: 670rpx;
      height: 478rpx;
      background: #fff;
      border-radius: 20rpx;
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .text-top {
        height: 102rpx;
        width: 100%;
        color: #134177;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-main {
          padding: 0 36rpx
        }

        .text-icon {
          height: 2rpx;
          width: 120rpx;
          background-color: #134177;
        }
      }

      .text-content {
        width: 624rpx;
        height: 354rpx;
        background: rgb(248, 248, 248);
        border-radius: 20rpx;
        font-size: 28rpx;
        color: #134177;
        box-sizing: border-box;
        padding: 30rpx 20rpx;
      }
    }

  }
</style>